<template>
  <div>
    <div style="margin:20px;">
      <a-form :form="form" layout="inline" @submit="handleSubmit">
        <a-form-item label="编号：">
          <a-input v-decorator="['childid']" placeholder="输入搜索编号" />
        </a-form-item>
        <a-form-item label="姓名：">
          <a-input v-decorator="['name']" placeholder="输入搜索姓名" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select  v-decorator="['status',{ initialValue: '' }]"  style="width: 120px">
              <a-select-option value="">无状态</a-select-option>
            <a-select-option value="0">未审核</a-select-option>
            <a-select-option value="1">审核通过</a-select-option>
            <a-select-option value="2">审核未通过</a-select-option>
            <a-select-option value="4">申请取消</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      rowKey="childid"
      @change="handleTableChange"
    >
      <template
        slot="parentName"
        slot-scope="parentName, record"
      >{{parentName}}</template>
      <template slot="status" slot-scope="status">
        <a-tag color="blue" v-if="status == 0">未审核</a-tag>
        <a-tag color="green" v-else-if="status == 1">审核通过</a-tag>
        <a-tag color="red" v-else-if="status == 2">审核未通过</a-tag>
        <a-tag color="orange" v-else>申请取消</a-tag>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="showModal(record)" href="javascript:">审核</a>
        <!-- <a-divider type="vertical" />
        <a-popconfirm
          @cancel="cancel"
          @confirm="removeData(record)"
          cancelText="否"
          okText="是"
          title="确认删除吗?"
        >
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a href="#">删除</a>
        </a-popconfirm>-->
      </span>
    </a-table>
    <ChildModal :record="record" :visible.sync="visible" @refreshTable="refreshTable" />
  </div>
</template>
<script>
import { delChild, getChildren } from "@/api/child";
import ChildModal from "./modules/ChildModal";
const columns = [
  {
    title: "编号",
    dataIndex: "childid",
    width: 100
  },
  {
    title: "孩子姓名",
    dataIndex: "name",
    width: 100
  },
  {
    title: "孩子身份证号",
    dataIndex: "idcardno",
    width: 150
  },
  {
    title: "家长姓名（关系）",
    dataIndex: "parentName",
    scopedSlots: {
      customRender: "parentName"
    },
    width: 120
  },
  {
    title: "家长电话",
    dataIndex: "mobile",
    width: 120
  },
  {
    title: "申请时间",
    dataIndex: "gmtCreate",
    sorter: true,
    width: 200
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: {
      customRender: "status"
    },
    width: 120
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: {
      customRender: "action"
    },
    width: 120
  }
];
export default {
  components: {
    ChildModal
  },
  data() {
    return {
      record: {},
      visible: false,
      data: [],
      loading: false,
      pagination: {},
      columns,
      form: this.$form.createForm(this)
    };
  },
  mounted() {
    this.fetchData({
      pageSize: 20,
      pageIndex: 1
    });
  },
  watch: {},
  methods: {
    onFillterKeyword() {
      //关键字过滤
      this.refreshTable(() => {
        console.log("pagination:" + JSON.stringify(this.pagination));
        this.data = this.data.filter(item => {
          return (
            (item.childid + "").indexOf(this.fillterKeyword) != -1 ||
            item.name.indexOf(this.fillterKeyword) != -1
          );
        });
      });
    },
    onReset() {
        this.form.resetFields();
      //重置
      this.refreshTable();
    },
    showModal(record) {
      console.log("record:" + JSON.stringify(record));
      this.record = record;
      this.visible = true;
    },
    handleTableChange(pagination, filters, sorter) {
      this.fetchData({
        pageSize: pagination.pageSize,
        pageIndex: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order
      });
    },
    refreshTable(callback) {
      console.log(this.pagination);
      this.fetchData(
        {
          pageSize: this.pagination.pageSize,
          pageIndex: this.pagination.current
        },
        callback
      );
    },
    fetchData(params, callback) {
      this.loading = true;
      console.log(params);
      getChildren(params).then(res => {

        this.loading = false;
        const data = res['data'];

        console.log(res.current)
        const pagination = { 
          current: data.current,
          total: data.total,
          pageSize: data.size,
          showTotal() {
            return `共 ${data.total} 条`;
          }
        };

        console.log(data)
        this.pagination = pagination;
        this.data = data.records;
        //用id排序一下
        this.data.sort(function(a, b) {
          return a.childid - b.childid;
        });
        if (callback != null) {
          callback();
        }
      });
    },
    removeData(record) {
      console.log(record.childid);
      delChild(record.childid).then(res => {
        console.log(res);
        this.refreshTable();
      });
    },
    cancel() {},
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.fetchData({
            pageSize: this.pagination.pageSize,
            pageIndex: this.pagination.current,
            ...values
          });
        }
      });
    }
  },
  filters: {
    formatDate(timestamp) {
      return new Date(timestamp).toLocaleString();
    },
    spliceContent(content) {
      if (content.length > 20) {
        return content.substr(0, 20) + "......";
      }
      return content.substr(0, 20);
    }
  }
};
</script>